<template>
    <div class="cover-wrap">
      <a class="close" @click="close()"></a>
      <img src="./share.png" class="share-img" v-if="type === 'share'"/>
      <img src="./introduce.png" v-if="type === 'introduce'" class="intro-img"/>
      <div class="intro-content" v-if="type === 'introduce'">
        <div class="intro-item">1.关注微信公众号</div>
        <img src="./qrcode.jpg" class="intros-img" />
        <div class="intro-item">2.关注公众号后回复“兑奖”或在菜单栏里点击“我的抵用券”，将会弹出抵用券使用二维码；
点击“领月饼”查看领月饼的相关说明。</div>
        <img src="./wechat.jpg" class="intros-img" style="width: 60%" />
        <div class="intro-item">3.在以下驾校报名缴费时，出示抵用二维码即可抵扣相应金额</div>
        <img src="./school.jpg" class="intros-img" style="width: 60%" />
        <div class="intro-item">4.每名学员只能使用一张抵用券，在使用抵用券时，不得同享同期其他优惠</div>
        <div class="intro-item">5.本次活动所获取的抵用券有效期至2017年10月31日</div>
        <div class="intro-item">6.本次活动未尽事宜，请浏览以上微信公众号或咨询客服</div>
      </div>
    </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: ['type'],
    data() {
      return {
      };
    },
    created() {
    },
    methods: {
      close() {
        this.$emit('getimg', '');
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .cover-wrap
    position fixed
    width 100%
    height 100%
    left 0
    top 0
    background-color rgba(0, 0, 0,0.5)
    z-index 1
    .close
      position: absolute;
      width: 40px;
      height 40px;
      bottom 5%
      left 50%
      margin-left -20px
      background url("./close.png")
      background-size 100% auto
    .share-img
      width: 90%;
      margin-left 10%
      height: 50%;
      position: relative;
    .intro-img
      width: 89%;
      height: 18%;
      position: relative;
      margin-top 5px
    .intro-content
      width 88%
      height 320px
      background-color rgb(255,255,255)
      margin-top -2px
      margin-left 6%
      overflow-y scroll
      padding-bottom 15px
      .intro-item
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        height: auto;
        padding-left 20px
        padding-right 20px
        padding-top 8px
        text-align justify
        color rgb(51,51,51)
        font-size 14px
        line-height 20px
      .intro-item:first-child
        padding-top 20px
      .intros-img
        width 50%
        height auto
        margin-top 5px
</style>
